<template>
  <el-card>
    <template #header>
      <div class="card-header">
        <div>
          <el-image style="width: 16px; height: 16px" :src="getIcon(site.siteUrl)"></el-image>
          <div style="display: inline">{{ site.siteName }}</div>
        </div>

        <div>
          <!-- <el-button class="button" text :bg="true" @click="test">{{ site.hotRankListName }}</el-button> -->
        </div>
      </div>
    </template>

    <el-scrollbar max-height="300px">
      <div v-for="(item, idx) in site.resultSite" :key="idx" class="card-body scrollbar-card-item">
        <span style="color: #f56c6c; width: 25px">{{ idx + 1 }}</span>
        <div class="body-title">
          <el-link :href="showMapping(site, item, 'slot_url')" target="_blank" :underline="false">{{ showMapping(site, item, 'slot_title') }}</el-link>
        </div>
        <div v-if="showMapping(site, item, 'slot0')">
          <el-tag class="ml-2" type="info" size="small">{{ showMapping(site, item, 'slot0') }}</el-tag>
        </div>
        <div v-if="showMapping(site, item, 'slot1')">
          <el-tag class="ml-2" type="success" size="small">{{ showMapping(site, item, 'slot1') }}</el-tag>
        </div>
        <div v-if="showMapping(site, item, 'slot2')">
          <el-tag size="small">{{ showMapping(site, item, 'slot2') }}</el-tag>
        </div>

        <div v-if="showMapping(site, item, 'slot3')">
          <el-tag effect="dark" type="danger" size="small">{{ showMapping(site, item, 'slot3') }}</el-tag>
        </div>
        <!-- <span style="max-width: 100px; height: 22px; line-height: 22px; overflow: hidden; margin-right: 10px"> {{ item.rating }}</span> -->
      </div>
    </el-scrollbar>
    <div v-if="false">
      <el-divider> </el-divider>
      <el-row :gutter="10" justify="end">
        <el-col :span="3">
          <el-button>btn</el-button>
        </el-col>
      </el-row>
    </div>
  </el-card>
</template>

<script>

export default {
  name: 'Card',
  props: ['site'],
  setup() {
    const getIcon = (url) => {
      let patt1 = /(\w+):\/\/([^/:]+)(:\d*)?([^# ]*)/
      let arr = url.match(patt1)
      let domain = arr[2].split('.')
      return `${arr[1]}://www.${domain[domain.length - 2]}.${domain[domain.length - 1]}/favicon.ico`
    }
    // const test = () => {
    //   console.log('')
    // }

    const showMapping = (site, item, k) => {
      let pageMappingConfig = site.pageMappingConfig
      let mappingKey = pageMappingConfig[k]
      if (mappingKey) {
        return item[mappingKey]
      }
      return item[k]
    }
    return { getIcon, showMapping }
  }
}
</script>

<style scoped>
.card-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.card-body {
  display: flex;
}
.card-body div {
  margin: 0 2px 0 3px;
}
.body-title {
  -webkit-box-flex: 1;
  flex: 1;
}
.text {
  font-size: 14px;
}
.scrollbar-card-item span {
  font-size: 14px;
}
.scrollbar-card-item:not(:first-child) {
  margin-top: 8px;
}
.el-divider {
  margin: 5px 0;
}
a:visited {
  color: #c0c4cc; /*已访问的链接颜色*/
}
</style>
